<style scoped>
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 150px;
    padding-bottom: 200px;
}

.wrapper>h1,
h2 {
    text-align: center;
    vertical-align: middle;
    margin-bottom: 20px;
    color: #000;
}

.login {
    margin: 0 auto;
    padding: 200px auto;
    width: 200px;
    height: 100%;
}
</style>

<template>
    <div class="wrapper">
        <h2>
            <img src="../../images/logo.png">
        </h2>
        <h1>
            后台管理系统
        </h1>
        <div class="login">
            <i-form ref="formInline"
                    :model="formInline"
                    :rules="ruleInline">
                <Form-item prop="userName">
                    <Input v-model="formInline.userName"></Input>
                </Form-item>
                <Form-item prop="userPassword">
                    <Input v-model="formInline.userPassword"
                           type="password"></Input>
                </Form-item>
                <Form-item>
                    <i-button type="success"
                              @click="handleSubmit()"
                              long>登录</i-button>
                </Form-item>
            </i-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formInline: {
                userName: '',
                userPassword: '',
            },
            ruleInline: {
                userName: [{
                    required: true,
                    message: '请填写用户名',
                    trigger: 'blur'
                }],
                userPassword: [{
                    required: true,
                    message: '请填写密码',
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        handleSubmit() {
            this.$http.post("services/login", this.formInline
            ).then(response => {
                if (response.data == 'error') {
                    this.$Message.error('用户名密码错误!');
                } else {
                    sessionStorage.setItem('token', response.data);
                    var decoded = JSON.parse(atob(response.data.split('.')[1]));
                    sessionStorage.setItem('permission', JSON.stringify(decoded.permission));
                    this.$Message.success('登录成功!');
                    this.$router.push('/views/common/index');
                }
            }, response => {
                this.$Message.error("获取失败, 返回: " + response);
            })
        }
    }
}
</script>